import { useState, useEffect } from 'react';
import styled from 'styled-components';
import { SevenSegDisplay } from './SevenSegDisplay'

const Wrapper = styled.div`
  width: 100%;
  padding: 2rem;
  background: #aaa;
`

export default function Demo() {
  const [count, setCount] = useState<number>(0);

  const timerCB = () => {
    setCount((c) => ((c===9) ? 0:(c+1)) )
  }
  useEffect(() => {
    const id = setInterval(timerCB, 1000);
    return (() => {
      if (!!id) clearInterval(id);
    })
  }, [])
  const char = count.toString();
  return (
    <Wrapper>
      <div style={{display:"flex"}}>
        <SevenSegDisplay c="8" color="#333" dot showName/>
        <SevenSegDisplay c={char} />
      </div>
      <div style={{display:"none"}}>
        <SevenSegDisplay c="0"/>
        <SevenSegDisplay c="1"/>
        <SevenSegDisplay c="2"/>
        <SevenSegDisplay c="3"/>
        <SevenSegDisplay c="4"/>
        <SevenSegDisplay c="5"/>
        <SevenSegDisplay c="6"/>
        <SevenSegDisplay c="7"/>
        <SevenSegDisplay c="8"/>
        <SevenSegDisplay c="9"/>
      </div>
    </Wrapper>
  );
}
